<template>
    <div>
      <el-card class="box-card">
        <el-breadcrumb separator="/" style="margin-bottom: 20px">
          <el-breadcrumb-item :to="{ path: '/emp' }"
            >部门管理</el-breadcrumb-item
          >
          <el-breadcrumb-item>部门管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-table border :data="tableData" style="width: 100%; margin-top: 20px">
          <el-table-column prop="usrId" label="员工编号"> </el-table-column>
          <el-table-column prop="usrName" label="员工姓名"> </el-table-column>
          <el-table-column label="操作">
            <template>
              <el-button size="mini">编辑</el-button>
              <el-button size="mini" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <template>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.pageIndex"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="params.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="params.total"
          >
          </el-pagination>
        </template>
      </el-card>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        tableData: [],
        params: {
          pageSize: 5, //每页显示5条记录
          pageIndex: 1, //当前第几页
          total: 0, //共几条记录去分页
          usrName: "",
        },
        did: 0,
        addDialogVisible: false,
        editDialogVisible: false,
        formLabelWidth: "120px",
      };
    },
    //mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
    mounted() {
      //this.search();
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.params.pageSize = val;
        this.search();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.params.pageIndex = val;
        this.search();
      },
     async search() {
        const url = "/vueboot/user/list";
        const { data: res } = await this.$ajax
          .get(url, {
            params: {
              pageIndex: this.params.pageIndex,
              limit: this.params.pageSize,
              usrName: this.params.usrName,
            },
            headers: {
              token: localStorage.getItem("token"),
            },
          })
          .catch((error) => {
            this.$message.error("发生异常,请重新登录");
            this.$router.push("/login");
          });
        console.log(res);
        if (res.errorCode == "30006") {
          this.$message.error("token不存在,请重新登录!");
          this.$router.push("/login");
        }
        this.tableData = res.content;
        this.params.total = res.totalElements;
      },
    },
  };
  </script>
  <style>
  .breadcrumb {
    height: 30px;
  }
  </style>